<html>
<head>
    <title>部门管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">部门管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="userNode"  :tabsign="'p'"></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-input v-model="departName"  placeholder="部门名称" style="width: 220px"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="success" @click="addClick" >新增</el-button>

                            <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="right">
                                <el-button type="primary" @click="searchDepart" >查询</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table   border stripe style="width: 100%" :data="tabData">
                    <el-table-column prop="DepartmentID" label="部门ID" align="center">
                    </el-table-column>
                    <el-table-column prop="DepartmentName" label="部门名称" align="center">
                    </el-table-column>
                    <el-table-column prop="ParentID" label="父节点"  align="center">
                    </el-table-column>
                    <el-table-column prop="PersonAmount" label="部门人数"  align="center">
                    </el-table-column>
                    <el-table-column prop="DeleteFlag" label="启用状态" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.DeleteFlag == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.DeleteFlag == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="small"  icon="el-icon-edit"></el-button>
                            <el-button  round icon="el-icon-delete"  size="small" @click="delClick(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑部门':'新增部门'"
                   :visible.sync="editFormVisible"
                   center
                   width="35%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="部门名称" prop="DepartmentName" :rules="[
                             {required:true,message:'ID不能为空!',trigger:'blur'}
                ]" >
                    <el-input v-model="form.DepartmentName" ></el-input>
                </el-form-item>
                <el-form-item label="父级部门">
                    <el-select v-model="form.ParentID" placeholder="请选择类型" style="width: 100%;">
                        <el-option
                                v-for="item in tabData"
                                :key="item.departmentID"
                                :label="item.departmentName"
                                :value="item.departmentID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用" prop="DeleteFlag"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.DeleteFlag" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门人数">
                    <el-input  v-model="form.PersonAmount" ></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('form')" style="background-color: #7eb8b0  ">取消</el-button>
                <el-button  @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存</el-button>
            </div>
        </el-dialog>
    </div>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            editFormVisible:false,
            departName:'',
            tabData:[],
            form:{},
            editMod:false,
            proNo:'',
            tooltip:false,
        },
        methods:{
            searchDepart:function(){
                this.getDepart({DepartmentName:this.departName});
            },
            addClick:function(data) {
                this.editMod = false,
                this.editFormVisible = true
            },
            userNode:function(data){
                if (data.id.indexOf('P')==-1){
                    return;
                }
                this.proNo =data.attributes.projectNo;
                this.getDepart({projectNo:this.proNo});
            },
            cancelClick(){
                this.form={}
                this.editFormVisible = false;
            },
            handleClick:function(data){
                this.editMod = true;
                this.form = data;
                this.editFormVisible = true
            },
            delClick(data) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('Department/Delete',{Id:data.id}).success((res)=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getDepart();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName){
                this.form.projectNo = this.proNo;
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        if(!this.editMod){
                            HttpUtil.get('Department/Add',this.form).success((res)=>{
                                this.$message({
                                    type:'success',
                                    message:'保存成功'
                                });
                                this.getDepart();
                            })
                        }else{
                            HttpUtil.get('Department/Update',this.form).success((res)=>{
                                this.$message({
                                    type:'success',
                                    message:'修改成功'
                                });
                                this.getDepart();
                            })
                        }

                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },
            getDepart(params){
                if(params==null){
                    var params = {
                        pageno:1,
                        pagesize: 200
                    }
                }else{
                    params['pageno']=1;
                    params['pagesize']=200;
                }
                HttpUtil.get('Department/List',params).success((res)=>{
                            this.tabData = res.data;
                })
            }

        },
        created:function(){

        },
        mounted:function(){
            this.tooltip = true;
        }
    });


</script>

</body>
</html>
